<template>
  <div :class="$style.knowDialog" :style="{right}">
    <div ref="svgIcon" :class="$style.icon">
      <svg-icon icon-class="cebianshensuozuosuo-line" @click.native="clickHandle"></svg-icon>
    </div>
    <el-dialog class="elDialog" width="80%" :visible.sync="visible" title="知识库" :show-close="true" append-to-body>
      <!-- <span slot="title"></span> -->
      <SearchMain v-show="showQuery" is-create-order @click="clickDetailHandle"></SearchMain>
      <div v-show="!showQuery">
        <div style="text-align:right;">
          <Button type="primary" @click="showQuery=true">返回</Button>
        </div>
        <Detail :id="id"></Detail>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SearchMain from '@/views/knowledgeLibrary/searchMain'
import Detail from '@/views/knowledgeLibrary/contentManage/child/detail'
export default {
  name: 'Dialog',
  components: {
    SearchMain,
    Detail
  },
  data() {
    return {
      visible: false,
      showQuery: true,
      id: '',
      right: '-15px'
    }
  },
  mounted() {
    this.mouseenter()
    this.mouseleave()
  },
  beforeDestroy() {
    this.removeHandler()
  },
  methods: {
    clickHandle() {
      this.visible = true
    },
    clickDetailHandle(id) {
      this.id = id
      this.showQuery = false
    },
    mouseenter() {
      this.$nextTick(() => {
        this.$refs.svgIcon.addEventListener('mouseenter', this.showHandler)
      })
    },
    mouseleave() {
      this.$nextTick(() => {
        this.$refs.svgIcon.addEventListener('mouseleave', this.hiddenHandler)
      })
    },
    removeHandler() {
      const el = this.$refs.svgIcon
      el.removeEventListener('mouseenter', this.showHandler)
      el.removeEventListener('mouseleave', this.hiddenHandler)
    },
    showHandler(e) {
      this.right = '0px'
    },
    hiddenHandler(e) {
      this.right = '-15px'
    }
  }
}
</script>
<style lang="scss" module>
.knowDialog{
  display: inline-block;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  transition: right .5s;
  right: 0;
  opacity: .6;
  .icon{
    cursor: pointer;
    width: 40px !important;
    height: 40px !important;
    background-color: #00926d;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    &>svg{
      color: #fff;
      fill: #fff;
      font-size: 24px;
    }
  }
}
</style>
<style lang="scss">
  .elDialog{
    [class*="el-dialog__header"]{
      // display: none !important;
    }
    &::-webkit-scrollbar{
      width: 6px;
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb{
      width: 6px;
      border-radius: 3px;
      background-color: rgba(144, 147, 153, 0.5);
    }
  }
</style>
